<!--
  作者：qzy
  时间：20221030
  说明：此组件为教学任务详情页的课程详情主页面，作为展示课程信息，编辑、添加助教
-->
<template>
  <div class="class-msg">
    <div class="title">
      <ul>
        <li>
          <i>
            <el-icon>
              <ChatDotRound/>
            </el-icon>
          </i>
          <span>课程信息</span>
        </li>
      </ul>
    </div>
    <div class="msg-content">
      <div class="msg-img">
        <el-image
          v-if="false"
          :src="`http://localhost:8071/${course.cover}`"
        />
        <img src="@/assets/image/indexImg.png" alt="">
      </div>
      <div class="msg-center">
        <ul v-for="(item,index) in classMsgList" :key="index">
          <li>班级名称 <span>{{ item.className }}</span></li>
          <li>所属学期 <span>{{ item.schoolTerm.name }}</span></li>
          <li>所属课程 <span>{{ item.schoolCourse.name }}</span></li>
        </ul>
        <ul v-for="(item,index) in classMsgList" :key="index">
          <li>课程编码 <span>{{ item.schoolClassRoom ? item.schoolClassRoom.name : defaultData }}</span></li>
          <li>教学班 <span>{{ item.schoolClass ? item.schoolClass.name : defaultData }}</span></li>
          <li>专业名称 <span>{{ item.intro ? item.intro : defaultData }}</span></li>
        </ul>
        <div class="border"></div>
        <ul v-for="(item,index) in classMsgList" :key="index">
          <li>
            <i>
              <el-icon>
                <Postcard/>
              </el-icon>
            </i>
            创建时间:
            <span>{{ item.createTime }}</span>
          </li>
          <li>
            <i>
              <el-icon>
                <Postcard/>
              </el-icon>
            </i>
            学生个数:
            <span> 0</span>
          </li>
          <li>
            <i>
              <el-icon>
                <Postcard/>
              </el-icon>
            </i>
            主持人:
            <span>教师</span>
          </li>
          <li>
            <i>
              <el-icon>
                <Postcard/>
              </el-icon>
            </i>
            课堂数:
            <span> 0</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="class-bottom">
    <div class="class-hosts">
      <div class="title">
        <ul>
          <li>
            <i>
              <el-icon>
                <ChatDotRound/>
              </el-icon>
            </i>
            <span>任课教师</span>
          </li>
        </ul>
      </div>
      <div class="hosts-content">
        <div class="hosts">
          <div class="host">
            <img src="@/assets/image/nopic.jpg" alt="">
            <span>教师</span>
            <span>201112111</span>
          </div>
        </div>
      </div>
    </div>
    <div class="class-team">
      <div class="title">
        <ul>
          <li>
            <i>
              <el-icon>
                <ChatDotRound/>
              </el-icon>
            </i>
            <span>助教老师</span>
          </li>
          <li class="team-button">
            <div @click="addDia">
              <i>
                <el-icon><CirclePlusFilled /></el-icon>
              </i>
              <span>添加成员</span>
            </div>
            <div @click="delDia">
              <i>
                <el-icon><DeleteFilled /></el-icon>
              </i>
              <span>移除</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="hosts-content" v-if="teamList.length > 0 && teamList !== ''">
        <div class="hosts">
          <div class="host" v-for="(item,index) in teamList" :key="index">
            <img src="@/assets/image/nopic.jpg" alt="">
            <span>{{ item.schoolTeacher.name }}</span>
            <span>{{ item.schoolTeacher.teacherNumber }}</span>
          </div>
        </div>
      </div>
      <div class="empty" v-else>
        <i></i>
        <p>暂无协助教师</p>
      </div>
    </div>
  </div>
  <ClassMessageAddOrEditDialog  ref="dialog" :getTeamList="getTeamList" :action="action" :teamList="teamList"/>
</template>

<script lang='ts' setup>
import { ElNotification as notify } from 'element-plus';
import { ref, getCurrentInstance, onMounted } from 'vue';
import ClassMessageAddOrEditDialog from '@/views/page/tearchertack/mycourse/details/teachingdetails/classmessage/ClassMessageAddOrEditDialog.vue';
import Request from '@/api/request/request';

const { proxy } = getCurrentInstance();
const date = new Date().getFullYear();
const dialog = ref();
// eslint-disable-next-line radix
const teachingTaskId = parseInt(sessionStorage.getItem('teachingTaskId') as string);
const teamList = ref([]); // 助教团队
const classMsgList = ref([]); // 教学班信息
const action = ref(); // 操作标识符
const defaultData = ref<string>('暂无数据');

const addDia = () => {
  action.value = 'add';
  dialog.value.openDialog();
};

const delDia = () => {
  action.value = 'del';
  dialog.value.openDialog();
};
// 获取教学班信息
const getClassMegList = async () => {
  const resData:any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLTEACHINGTASK_MANAGE, null, {
    params: {
      id: teachingTaskId,
    },
  }).get();
  if (resData.code === 200) {
    console.log(resData);
    classMsgList.value = resData.data.data;
  }
};
// 获取助教团队
const getTeamList = async () => {
  const resData:any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLTEACHINGTASKTEACHER_MANAGE, null, {
    params: {
      teachingTaskId,
    },
  }).get();
  if (resData.code === 200) {
    teamList.value = resData.data.data;
  }
};

onMounted(async () => {
  await getTeamList();
  await getClassMegList();
});
</script>

<style src="./index.scss" lang="scss" scoped>

</style>
